<template>
  <div id="leftModules" class="grid-content bg-purple" style="position:relative;height:100%;">
    <span class="el-icon-caret-left" :class="{'el-icon-caret-right':isCollapse}" @click="isCollapse=!isCollapse" v-show="!!leftModules.length"></span>
       <el-menu  
       class="el-menu-vertical-demo"  
       router
       @open="handleOpen"
       @close="handleClose" 
       :collapse="isCollapse"
       :default-active="index">  
       <MenuChild :navMenus="leftModules"></MenuChild>  
     </el-menu> 
  </div>
</template>





<script>
  import MenuChild from './menuChild.vue'
  export default {
    data() {
      return {
        isCollapse: false,
        activeName: 'first'
      };
    },
    computed : {
      index(){
        return this.$route.path;
      },
      leftModules :{
        get() {
          var leftModules = this.$store.state.leftModules;
          return leftModules;
        }
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    components : {
      MenuChild
    }
      
    
  }


</script>

<style>
 #leftModules .el-menu-vertical-demo:not(.el-menu--collapse) {
    height: 100%;
  }
 #leftModules .el-icon-caret-left{
    position: absolute;
    top: 25px;
    right: 16px;
    z-index: 99;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    background: #752828;
 }
 #leftModules .el-icon-caret-right{
   right:5px;
 }
#leftModules  .el-menu-item.is-active{
    background: rgb(218, 31, 36);
    color: #fff;
  }
#leftModules  .el-col {
    border-radius: 4px;
  }
 #leftModules .el-menu--collapse{
    height: 100%;
  }
 #leftModules .el-menu--collapse .el-submenu__title span{
    display:none;
  }
 #leftModules .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

 #leftModules .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

 #leftModules .el-tabs {
    width: 96%;
    margin: 0 auto;
  }
  main.el-main{
    border-left:0;
    margin:0;
  }
</style>
